@import "../../style/public";

.business-analysis {
  line-height: 1.1;

  .disabled {
    color: #ccc !important;
  }

  .chart-width {
    width: pw(355);
    height: auto;
    margin-left: pw(10);
    background-color: #fff;
    margin-bottom: pw(20);
    border-radius: 10px;

    .table {
      li {
        line-height: initial;

        >div {
          @include remCalc(padding, 10, 0);

          &:first-child {
            width: 40%;
          }
        }
      }
    }

    .section {
      .table1 {
        color: rgba(153, 153, 153, 1);

      }
    }

  }

  .arrow-down {
    &::before {
      transform: rotate(90deg);
      display: inline-block;
    }
  }

  .table {
    @include remCalc(font-size, 24);
    @include remCalc(margin, 0, 0, 0, 30);
    color: #333;

    >li {
      display: flex;
      // @include thin-border(false, false, bottom);
      @include remCalc(height, 60);
      @include remCalc(line-height, 60);
      box-sizing: border-box;
      font-family: PingFang SC;
      @include remCalc(font-size, 28);
      font-weight: 400;


      >div {
        box-sizing: border-box;
        word-break: break-all;
        display: flex;
        justify-content: center;
        flex-flow: column;

        &:first-child {
          @include remCalc(width, 200);

          &+div {
            @include remCalc(padding-right, 50);
            @extend %text-overflow;
            flex: 1;

            &+div {
              @include remCalc(width, 176);

              &+div {
                @include remCalc(width, 118);
              }
            }
          }
        }
      }
    }
  }

  .orderSource {
    @include remCalc(padding, 30, 30, 0, 30);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;

    .chart-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-top: 0;

      .scroll-wrap {
        flex: 1;
        overflow-y: auto;
      }
    }
  }

  .hide {
    display: none;
  }

  .chart-remark {
    @include remCalc(font-size, 24);
    color: #999;
    line-height: 1.5;
  }

  .tab-bar {
    display: flex;
    border: 1px solid $color-red;
    border-radius: pw(10);
    overflow: hidden;
    @include remCalc(margin, 50, 0, 40, 0);

    li {
      flex: 1;
      text-align: center;
      @include remCalc(height, 80);
      @include remCalc(line-height, 80);
      @include remCalc(font-size, 30);
      color: rgba(255, 33, 26, 1);
      background: #fff;
      border-left: 1px solid $color-red;
      box-sizing: border-box;

      &:first-child {
        border-left: none;
      }

      &.selected {
        background: linear-gradient(271.44deg, #F52222 0%, #D81212 100%);

        color: #fff;
      }
    }
  }

  .section-title {
    box-sizing: border-box;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    // @include thin-border(false, false, bottom);

    @include remCalc(margin-left, 30);
    @include remCalc(padding-right, 30);
    color: rgba(51, 51, 51, 1);
    @include remCalc(font-size, 32);
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: PingFang SC;

    font-weight: 500;


  }

  .section-container {
    @include remCalc(padding, 0, 30);
  }

  .filter {
    //@include remCalc(margin-top, 20);
    @include remCalc(font-size, 32);
    //color: #333;
    color: $color-red;
    display: flex;
    @include remCalc(margin-bottom, 20);
    @include thin-border(false, false, bottom, #e5e5e5);

    >li {
      flex: 1;
      text-align: center;
      background: #fff;
      @include remCalc(height, 90);
      @include remCalc(line-height, 90);
      box-sizing: border-box;

      &.ope {
        color: rgba(255, 33, 26, 1);

      }

      &.date {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        color: rgba(255, 33, 26, 1);

        &.custom {
          >div {
            width: 100%;
          }
        }

        >div {
          height: auto;
          line-height: initial;
          @include remCalc(width, 280);
        }
      }
    }
  }

  %section {
    @include remCalc(margin-bottom, 20);
    @include thin-border(true, false);
    background: #fff;
  }

  .chart-wrap {
    @include remCalc(margin-top, 30);
  }

  .trade-summary {
    // @extend %section;
    width: pw(355);
    height: pw(306);
    margin-left: pw(10);
    border-radius: pw(10);
    background-color: white;
    margin-bottom: pw(10);

    .ts-content {
      @include remCalc(padding, 0, 20, 20, 20);

      .top {
        text-align: center;

        .yuan {
          display: block;
          @include remCalc(font-size, 28);
          margin-top: pw(20);
          margin-bottom: pw(10);
          color: rgba(51, 51, 51, 1);
          ;

          font-family: PingFang SC;

          font-weight: 400;


        }

        .total-get {
          display: flex;
          height: pw(40);

          justify-content: center;
          // span {
          //   display: block;
          //   @include remCalc(font-size, 28);
          //   @include remCalc(padding, 50, 0, 40, 0);
          //   color: rgba(51, 51, 51, 1);
          //   ;

          //   font-family: PingFang SC;

          //   font-weight: 400;


          // }
          .overview-header-total-intint {
            font-family: HarmonyOS Sans;
            font-size: pw(24);
            font-weight: 700;

            margin-top: pw(15);
            color: rgba(255, 33, 26, 1);


          }

          .overview-header_total_int {
            font-family: HarmonyOS Sans;

            font-weight: 700;

            color: rgba(255, 33, 26, 1);

            @include remCalc(font-size, 80);
          }

          div {
            @include remCalc(font-size, 70);
            color: #ff801a;
          }
        }


        .discount {
          @include remCalc(padding, 40, 0, 50, 0);
          @include remCalc(font-size, 28);
          color: rgba(51, 51, 51, 1);
          font-family: PingFang SC;
          font-weight: 400;
        }
      }

      .bottom {
        display: flex;
        width: pw(355);

        >li {
          // @include remCalc(padding-left, 70);
          // flex: 1;
          position: relative;
          width: pw(162);
          height: pw(106);
          background: rgba(245, 245, 245, 1);
          margin-right: pw(10);
          border-radius: pw(10);

          // &:first-child {
          //   @include remCalc(padding-left, 30);

          // }

          .money {
            margin-top: pw(10);
            margin-left: pw(6);

            span {
              @include remCalc(font-size, 28);
              color: rgba(51, 51, 51, 1);
              ;
            }

            div {
              @include remCalc(padding, 16, 0, 16, 0);
              @include remCalc(font-size, 48);
              color: #000;
              font-family: HarmonyOS Sans;

              font-weight: 700;


            }
          }

          .amount {
            @include remCalc(font-size, 28);
            color: rgba(51, 51, 51, 1);
            margin-left: pw(6)
          }
        }
      }
    }
  }

  .get-way {
    width: pw(355);
    height: pw(472);
    background-color: #fff;
    margin: pw(10) pw(10) 0;
    border-radius: pw(10);
    // @extend %section;
    // @include remCalc(padding, 50, 30, 40, 30);
  
  }

  .zhk-statistics {
    @extend %section;
    @include remCalc(padding-bottom, 30);
    width: pw(355);
    @include remCalc(height, 688);
    background-color: #fff;
    margin-left: pw(10);
    border-radius: pw(10);

    .swipe-wrap {
   
      @include remCalc(padding, 0, 20, 20, 20);
      @include remCalc(height, 556);
      .jia{
        display: flex;
        span{
          margin-left: pw(50);
          text-align: center
        }
      }
      .swiper-pagination{
        margin-top: pw(10)
      }
      .type {
        @include remCalc(font-size, 30);
        color: rgba(42, 199, 86, 1);
        // padding-top: pw(20);
   
        // @include remCalc(padding, 20, 30, 10, 20);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: pw(52);
height: pw(24);
background: rgba(220, 255, 230, 1);
border-radius: 0 12px 12px 0;

// border-radius: 0px, pw(12), pw(12), 0px
        p{
          width: pw(52);
          height: pw(24);
          margin-left: pw(5);
          line-height: pw(24);
        }
      }

      .swipe-item {
        @include remCalc(height, 510);
        box-shadow: 0 5px 5px #f3f3f3;
        @include remCalc(margin, 10, 0, 20, 0);
        background: #fcfcfc;
        border-radius: 8px;
        border: 1px solid #e3e3e3;
        display: flex;
        width: pw(330);
        margin-bottom: pw(33);
        .ts-content {
          margin-top: pw(20);
          .top {
            text-align: center;
      
            .total-get {
              display: flex;
              height: pw(40);
              margin-top: pw(5);
              justify-content: center;
              // span {
              //   display: block;
              //   @include remCalc(font-size, 28);
              //   @include remCalc(padding, 50, 0, 40, 0);
              //   color: rgba(51, 51, 51, 1);
              //   ;
    
              //   font-family: PingFang SC;
    
              //   font-weight: 400;
    
    
              // }
              .overview-header-total-intint {
                font-family: HarmonyOS Sans;
                font-size: pw(24);
                font-weight: 700;
    
                margin-top: pw(15);
                color: rgba(255, 33, 26, 1);
    
    
              }
    
              .overview-header_total_int {
                font-family: HarmonyOS Sans;
    
                font-weight: 700;
    
                color: rgba(255, 33, 26, 1);
    
                @include remCalc(font-size, 80);
              }
    
              div {
                @include remCalc(font-size, 70);
                color: #ff801a;
              }
            }
            .discount {
              @include remCalc(padding, 20, 0, 50, 0);
              @include remCalc(font-size, 26);
              color: #666;
            }
          }

          .bottom {
            display: flex;
            width: pw(330);
    
            >li {
              // @include remCalc(padding-left, 70);
              // flex: 1;
              position: relative;
              width: pw(152);
              height: pw(106);
              background: rgba(245, 245, 245, 1);
              margin-left: pw(8);
              border-radius: pw(10);
    
              // &:first-child {
              //   @include remCalc(padding-left, 30);
    
              // }
    
              .money {
                margin-top: pw(10);
                margin-left: pw(6);
    
                span {
                  @include remCalc(font-size, 28);
                  color: rgba(51, 51, 51, 1);
                  ;
                }
    
                div {
                  @include remCalc(padding, 16, 0, 16, 0);
                  @include remCalc(font-size, 48);
                  color: #000;
                  font-family: HarmonyOS Sans;
    
                  font-weight: 700;
    
    
                }
              }
    
              .amount {
                @include remCalc(font-size, 28);
                color: rgba(51, 51, 51, 1);
                margin-left: pw(6)
              }
            }
          }
        }
      }
    }

    .tip {
      @include remCalc(font-size, 22);
      @include remCalc(padding, 20, 0, 0, 0);
      color: #7e7e7e;
      text-align: center;
    }
  }

  .effect-statistics {
    @extend %section;
    @include remCalc(padding, 0, 30, 20, 30);
  }

  .store {
    @extend %section;
  }

  .all-store {
    background: #fff;
    @include remCalc(font-size, 30);
    color: red;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    @include remCalc(padding, 0, 30);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      color: red;
    }
  }

  .all-source {
    width: pw(355);
    height: pw(45);
    @extend .all-store;
    
    border-radius: 0 0 pw(10) pw(10);

  }
}
